<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <style>
        .profile-container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
        }
        .field {
            margin: 15px 0;
            padding: 10px;
            border-bottom: 1px solid #ebeef5;
        }
        .field label {
            display: inline-block;
            width: 120px;
            color: #909399;
        }
        .avatar {
            border-radius: 50%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="app">
        <a href="space.html">返回大厅</a>
        <h2>用户信息</h2>

        <!-- 用户头像 -->
        <div class="field">
            <label>头像：</label>
            <img :src="user.avatarPath || 'default-avatar.png'"
                 class="avatar"
                 width="60"
                 height="60">
        </div>

        <!-- 用户信息字段 -->
        <div class="field">
            <label>用户名称：</label>
            <span>{{ user.userName }}</span>
        </div>

        <div class="field">
            <label>手机号码：</label>
            <span>{{ user.phone || '未绑定' }}</span>
        </div>

        <div class="field">
            <label>电子邮箱：</label>
            <span>{{ user.email || '未绑定' }}</span>
        </div>

    <div class="field">
        <label>用户类型：</label>
        <span>{{ userTypeText }}</span>
<!--        <el-button-->
<!--                v-if="showComposerBtn"-->
<!--                type="success"-->
<!--                size="mini"-->
<!--                :loading="composerLoading"-->
<!--                @click="handleBecomeComposer">-->
<!--            成为音乐人-->
<!--        </el-button>-->
<!--        <el-button-->
<!--                type="primary"-->
<!--                size="mini"-->
<!--                >-->
<!--            成为管理员-->
<!--        </el-button>-->
        <template v-if="user.userType === 3">
            <el-button
                    type="warning"
                    size="mini"
                    @click="handleGenerateManagerCode"
                    :loading="codeLoading">
                邀请管理员
            </el-button>
        </template>
        <template v-else>
            <el-button
                    v-if="showComposerBtn"
                    type="success"
                    size="mini"
                    :loading="composerLoading"
                    @click="handleBecomeComposer">
                成为音乐人
            </el-button>

            <el-button
                    type="primary"
                    size="mini"
                    @click="showCodeDialog">
                成为管理员
            </el-button>
        </template>
    </div>

        <div class="field">
            <label>注册时间：</label>
            <span>{{ formatDate(user.createdAt) }}</span>
        </div>

        <div class="field">
            <label>VIP截止时间：</label>
            <span v-if="user.vipEndAt">{{ formatDate(user.vipEndAt) }}</span>
            <span v-else>未成为VIP</span>
        </div>

        <div class="field">
            <label>钱包余额：</label>
            <span>{{ formatCurrency(user.wallet) }}</span>
            <el-button
                    type="primary"
                    size="mini"
                    @click="showRechargeDialog">
                立即充值
            </el-button>
        </div>
    <!-- 添加充值对话框 -->
    <el-dialog
            title="账户充值"
            :visible.sync="rechargeDialogVisible"
            width="30%">
        <el-radio-group v-model="selectedAmount">
            <el-radio
                    v-for="option in amountOptions"
                    :key="option.value"
                    :label="option.value">
                {{ option.label }}
            </el-radio>
        </el-radio-group>
        <span slot="footer">
        <el-button @click="rechargeDialogVisible = false">取消</el-button>
        <el-button
                type="primary"
                @click="handleRecharge"
                :loading="rechargeLoading">
            确认充值
        </el-button>
    </span>
    </el-dialog>

    <div class="field">
        <label>VIP状态：</label>
        <span v-if="user.vipEndAt">
        有效期至 {{ formatDate(user.vipEndAt) }}
        <el-tag type="success" size="mini">VIP会员</el-tag>
    </span>
        <span v-else>
        <el-tag type="info" size="mini">非VIP会员</el-tag>
    </span>
        <el-button
                type="danger"
                size="mini"
                @click="showVipDialog">
            {{ user.vipEndAt ? '续费VIP' : '开通VIP' }}
        </el-button>
    </div>

    <!-- VIP套餐选择对话框 -->
    <el-dialog
            title="选择VIP套餐"
            :visible.sync="vipDialogVisible"
            width="40%">
        <el-radio-group v-model="selectedVipPlan">
            <el-radio
                    v-for="plan in vipPlans"
                    :key="plan.type"
                    :label="plan.type"
                    border
                    style="margin: 10px; width: 180px">
                <div class="vip-plan">
                    <h3>{{ plan.title }}</h3>
                    <p class="price">¥{{ plan.price }}</p>
                    <p class="days">{{ plan.days }}天有效期</p>
                    <p class="tip" v-if="plan.recommend">🔥 热销推荐</p>
                </div>
            </el-radio>
        </el-radio-group>
        <div slot="footer">
            <el-button @click="vipDialogVisible = false">取消</el-button>
            <el-button
                    type="danger"
                    @click="handlePurchaseVip"
                    :loading="vipLoading">
                立即支付
            </el-button>
        </div>
    </el-dialog>
    <el-dialog
            title="管理员邀请码"
            :visible.sync="codeDialogVisible"
            width="400px">
        <div v-if="generatedCode" class="code-container">
            <p style="color: #F56C6C;font-weight: bold">邀请码有效期24小时</p>
            <el-tag type="danger" size="large">{{ generatedCode }}</el-tag>
        </div>
        <span slot="footer">
    <el-button @click="codeDialogVisible = false">关闭</el-button>
  </span>
    </el-dialog>

    <!-- 成为管理员验证码输入弹窗 -->
    <el-dialog
            title="管理员验证"
            :visible.sync="inputDialogVisible"
            width="400px">
        <el-input
                v-model="inputCode"
                placeholder="请输入管理员邀请码"
                clearable
                maxlength="36"
                show-word-limit>
        </el-input>
        <span slot="footer">
    <el-button @click="inputDialogVisible = false">取消</el-button>
    <el-button
            type="primary"
            @click="handleSubmitCode"
            :loading="verifyLoading">
      验证
    </el-button>
  </span>
    </el-dialog>
</div>


<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                user: {
                    avatarPath: '',
                    userName: '',
                    phone: null,
                    email: null,
                    userType: null,
                    createdAt: null,
                    vipEndAt: null,
                    wallet: 0,
                    composerLoading: false,
                },
                rechargeDialogVisible: false,
                selectedAmount: 0,
                amountOptions: [
                    { value: 5, label: '5元' },
                    { value: 10, label: '10元' },
                    { value: 20, label: '20元' },
                    { value: 50, label: '50元' },
                    { value: 100, label: '100元' }
                ],
                rechargeLoading: false,
                vipDialogVisible: false,
                selectedVipPlan: null,
                vipLoading: false,
                vipPlans: [
                    { type: 1, title: '体验套餐', price: 1, days: 1 },
                    { type: 2, title: '月卡会员', price: 10, days: 30 },
                    { type: 3, title: '季卡会员', price: 25, days: 90, recommend: true },
                    { type: 4, title: '半年卡', price: 50, days: 180 },
                    { type: 5, title: '年费会员', price: 80, days: 360 }
                ],
                // 新增数据属性
                codeDialogVisible: false,    // 邀请码展示弹窗
                inputDialogVisible: false,   // 验证码输入弹窗
                generatedCode: '',           // 生成的邀请码
                inputCode: '',               // 输入的邀请码
                verifyLoading: false,        // 验证加载状态
                codeLoading: false           // 生成码加载状态
            }
        }, mounted() {
            this.fetchUserData()
        },
        computed: {
            // 用户类型映射
            userTypeText() {
                const typeMap = {
                    1: '普通用户',
                    2: '音乐人',
                    3: '管理员'
                }
                return typeMap[this.user.userType] || '未知类型'
            },
            showComposerBtn() {
                return this.user.userType === 1 // 普通用户时显示
            },
        },

        methods: {
            //获取用户数据
            fetchUserData() {
                axios.get('/MVCDemo/user/getUser').then(resp=>{
                        this.user = resp.data;
                    }
                )
            },

            // 日期格式化
            formatDate(timestamp) {
                if (!timestamp) return ''
                const date = new Date(timestamp)
                return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
            },

            // 金额格式化
            formatCurrency(amount) {
                return (amount?.toFixed(2) || '0.00') + ' 元'
            },

            handleBecomeComposer() {
                axios.get('/MVCDemo/user/composer').then(resp => {
                    const result = resp.data;
                    if (result.code === 200) { // 根据实际响应字段调整
                        // 更新本地用户类型
                        //alert(this.user.userType )
                        // this.user.userType = 2
                        // 显示成功信息
                        this.$message( result.message)
                        this.fetchUserData();
                    } else {
                        this.$message.error(result.message || '操作失败')
                    }
                })
            },
            // 显示充值对话框
            showRechargeDialog() {
                this.selectedAmount = 0
                this.rechargeDialogVisible = true
            },

            // 执行充值操作
            handleRecharge() {
                if (!this.selectedAmount || this.selectedAmount <= 0) {
                    this.$message.warning('请选择充值金额')
                    return
                }
                //alert(this.selectedAmount)
                this.rechargeLoading = true
                // axios.post('/MVCDemo/user/updateUserWallet', {
                //     changValue: this.selectedAmount
                // })
                //     axios.post("/MVCDemo/user/updateUserWallet?changValue=",this.selectedAmount)
                const params = new URLSearchParams()
                params.append('changValue', this.selectedAmount)
                axios.post('/MVCDemo/user/updateUserWallet', params, {
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                })
                    .then(resp => {
                    this.$message.success(resp.data.message)
                    this.fetchUserData() // 刷新用户数据
                    this.rechargeDialogVisible = false
                }).catch(error => {
                    this.$message.error(error.response?.data?.message || '充值失败')
                }).finally(() => {
                    this.rechargeLoading = false
                })
            },
            showVipDialog() {
                this.vipDialogVisible = true
            },

            handlePurchaseVip() {
                if (!this.selectedVipPlan) {
                    this.$message.warning('请选择VIP套餐')
                    return
                }

                // 获取对应套餐的天数
                const selectedPlan = this.vipPlans.find(p => p.type === this.selectedVipPlan)
                if (!selectedPlan) {
                    this.$message.error('套餐信息异常')
                    return
                }

                this.vipLoading = true
                const params = new URLSearchParams()
                params.append('days', selectedPlan.days) // 关键修改点

                axios.post('/MVCDemo/user/updateUserVip', params, {
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                }).then(resp => {
                    this.$message.success(resp.data.message)
                    this.fetchUserData()
                    this.vipDialogVisible = false
                }).catch(err => {
                    const msg = err.response?.data?.message || '开通失败'
                    this.$message.error(msg)
                }).finally(() => {
                    this.vipLoading = false
                })
            },
            // 生成管理员邀请码
            async handleGenerateManagerCode() {
                this.codeLoading = true
                try {
                    const res = await axios.get('/MVCDemo/user/managerCode')
                    if(res.data.code === 200) {
                        this.generatedCode = res.data.data
                        this.codeDialogVisible = true
                    }
                } catch (e) {
                    this.$message.error(e.response?.data?.message || '生成失败')
                } finally {
                    this.codeLoading = false
                }
            },

            // 显示验证码输入对话框
            showCodeDialog() {
                this.inputCode = ''
                this.inputDialogVisible = true
            },

            // 提交验证码
            async handleSubmitCode() {
                if(!this.inputCode) {
                    return this.$message.warning('请输入验证码')
                }

                this.verifyLoading = true
                try {
                    const params = new URLSearchParams()
                    params.append('managerCode', this.inputCode)

                    const res = await axios.post('/MVCDemo/user/toBeManager', params, {
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                    })

                    this.$message[res.data.code === 200 ? 'success' : 'error'](res.data.message)
                    if(res.data.code === 200) {
                        this.inputDialogVisible = false
                        await this.fetchUserData() // 刷新用户数据
                    }
                } catch (e) {
                    this.$message.error(e.response?.data?.message || '验证失败')
                } finally {
                    this.verifyLoading = false
                }
            }


        }
    })
</script>
</body>
</html>